<template>
  <div class="score">
    <div class="title">
      <p class="name">{{ examData.source }}</p>
      <p class="description">
        (总分：{{ examData.totalscore }}分,限时：{{ examData.totaltime }}分钟)
      </p>
      <p class="description">
        学生：{{ studentInfo.studentname }}
      </p>
    </div>
    <div class="total">
      <div class="look">本次考试成绩</div>
      <div class="show">
        <div class="img" :class="{ imgTransform: imgShow }">
          <img :src="imgSrc.fail" alt="哭了" v-if="score < 60" />
          <img :src="imgSrc.pass" alt="过了" v-if="score >= 60" />
        </div>
        <div class="number" :class="{ border: isTransition }">
          <span>{{ score }}</span>
          <span>分数</span>
        </div>
        <el-button @click="toIndex()"> 返回首页 </el-button>
        <el-button @click="toScore()"> 查看我的成绩 </el-button>
      </div>
      <ul class="time">
        <li class="start">
          <span>开始时间</span> <span>{{ startTime }}</span>
        </li>
        <li class="end">
          <span>结束时间</span> <span>{{ endTime }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: "",
      user: {},
      studentInfo: {}, //学生信息
      examData: {}, //考试信息
      isTransition: false, //是否渲染完成
      score: 0, //总分
      imgShow: false, //不及格图片显示
      imgSrc: {
        fail: require("@/assets/img/cry.gif"),
        pass: require("@/assets/img/good.jpg"),
      },
      startTime: null, //考试开始时间
      endTime: null, //考试结束时间
    };
  },
  created() {
    this.transiton();
    this.getScore();
  },
  methods: {
    //返回首页
    toIndex() {
      this.$router.replace({ name: "student" });
    },
    toScore(){
      this.$router.replace({ name: "scoreTable" });
    },
    //一秒后过渡
    transiton() {
      setTimeout(() => {
        this.isTransition = true;
        this.imgShow = true;
      }, 1000);
    },

    //用户信息
    getUserInfo() {
      this.$http({
        url: this.$http.adornUrl("/sys/user/info"),
        method: "get",
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.user = data.user;

          this.$http({
            url: this.$http.adornUrl(`/exam/student/info/${this.user.userId}`),
            method: "get",
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.studentInfo = data.student;
            }
          });

        }
      });
    },

    getScore() {
      let finalScore = this.$route.query.finalScore;
      let startTime = this.$route.query.startTime;
      let endTime = this.$route.query.endTime;
      this.score = finalScore;
      this.startTime = startTime;
      this.endTime = endTime;
      this.id = this.$route.query.id;
      //考试信息
      this.$http({
        url: this.$http.adornUrl(`/exam/exammanage/info/${this.id}`),
        method: "get",
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.examData = data.examManage;
        }
      });

      this.getUserInfo();
    },
  },
};
</script>


<style lang="scss" scoped>
.show {
  display: flex;
  justify-content: center;
  align-items: center;
  img {
    width: 160px;
    height: 160px;
  }
  .imgTransform {
    opacity: 1 !important;
    transform: translateX(30px) !important;
    transition: all 0.6s ease !important;
  }
  .img2Transform {
    opacity: 1 !important;
    transform: translateX(-30px) !important;
    transition: all 0.6s ease !important;
  }
  .img {
    margin-top: 70px;
    opacity: 0;
    transform: translateX(0px);
    transition: all 0.6s ease;
  }
  .img2 {
    margin-top: 30px;
    opacity: 0;
    transform: translateX(0px);
    transition: all 0.6s ease;
  }
}
.time {
  padding: 0px 70px;
  li {
    display: flex;
    justify-content: space-around;
    padding: 10px;
    margin: 20px 0px;
  }
  li:nth-child(1) {
    background-color: #fcf8e3;
  }
  li:nth-child(2) {
    background-color: #e9f5e9;
  }
}
.border {
  border: 6px solid #36aafd !important;
  transition: all 2s ease;
  width: 160px !important;
  height: 160px !important;
  transform: rotate(360deg) !important;
  opacity: 1 !important;
}
.score {
  max-width: 800px;
  margin: 0 auto;
  .title {
    margin: 60px 0px 30px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    .name {
      font-size: 26px;
      color: inherit;
      font-weight: 500;
    }
    .description {
      font-size: 14px;
      color: #888;
    }
  }
  .total {
    border: 1px solid #dbdbdb;
    background-color: #fff;
    padding: 40px;
    .look {
      border-bottom: 1px solid #dbdbdb;
      padding: 0px 0px 14px 14px;
      color: #36aafd;
    }
    .number {
      opacity: 0;
      border: 6px solid #fff;
      transform: rotate(0deg);
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      margin: 0 auto;
      width: 160px;
      height: 160px;
      border-radius: 50%;
      margin-top: 80px;
      margin-bottom: 20px;
      transition: all 1s ease;

      span:nth-child(1) {
        font-size: 36px;
        font-weight: 600;
      }
      span:nth-child(2) {
        font-size: 14px;
      }
    }
  }
}
</style>

